<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>学习笔记</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/reset.css"/>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
</head>
<body>
{% include 'alert.html' %}
<div id="particles-js">
    <div class="login">
        <div class="login-top">
            登录
        </div>
        <form id="login" method="post" action="{% url 'users:login' %}" class="needs-validation">
            {% csrf_token %}
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="/static/img/name.png"/></div>
                <div class="login-center-input">
                    <input type="text" id="username" name="username" value="admin" placeholder="请输入用户名"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
                    <div class="login-center-input-text">用户名</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="/static/img/password.png"/></div>
                <div class="login-center-input">
                    <input type="password" id="password" name="password" value="" placeholder="请输入密码"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
                    <div class="login-center-input-text">密码</div>
                </div>
            </div>
            <div style="margin: 50px 50px 0;">
                <button class="login-button" type="submit">登 录</button>
            </div>
        </form>
        <br>
        <div style="padding-left: 50px">
            <small>没有账号?</small>
            <a href="{% url 'users:register' %}" class="signup">&nbsp;注册</a>
        </div>
    </div>
    <div class="sk-rotating-plane"></div>
</div>
<!-- a hidden url to re-direct to the home page if successful -->
<input type="hidden" id="next" name="next" value="{% url 'learning_logs:index' %}">
<!-- JavaScript files-->
<script src="/static/js/particles.min.js"></script>
<script src="/static/js/app.js"></script>
<script>
    // 如果验证不通过禁止提交表单
    (function () {
        'use strict';
        window.addEventListener('load', function () {
            // 获取表单验证样式
            var forms = document.getElementsByClassName('needs-validation');
            // 循环并禁止提交
            Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    } else {
                        event.preventDefault();
                        event.stopPropagation();
                        sign_in();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>
<script>
    function sign_in() {
        const form = $('form');
        $.ajax({
            method: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function (data) {
                if (data.code === 0) {
                    location.href = $('#next').val();
                } else {
                    $('#alert').show();
                    $('#alert>strong').text('用户名或密码错误');
                }
            }
        })
    }
</script>
</body>
</html>